<template>
    <div>
        <div class="user-container">
            <el-card class="user-profile" shadow="hover" :body-style="{ padding: '0px' }">
                <div class="user-profile-bg"></div>
                <div class="user-avatar-wrap">
                    <el-avatar class="user-avatar" :size="120" :src="avatarImg" />
                </div>
                <div class="user-info">
                    <div class="info-name">{{userInfo.h_real_name}} · {{ name }}</div>
                    <div><el-icon><StarFilled /></el-icon> {{ userInfo.role_name }}</div>
                </div>
            </el-card>
            <el-card
                class="user-content"
                shadow="hover"
                :body-style="{ padding: '20px 50px', height: '100%', boxSizing: 'border-box' }"
            >
                <el-tabs tab-position="left" v-model="activeName">
                    
                    <el-tab-pane name="label1" label="修改密码" class="user-tabpane">
                        <el-form class="w500" 
                            label-position="top"
                            ref="ruleFormRef"
                            :rules="rules"
                            :model="form"
                         >
                            <el-form-item label="旧密码：" prop="old_password">
                                <el-input type="password" v-model="form.old_password"></el-input>
                            </el-form-item>
                            <el-form-item label="新密码：" prop="password">
                                <el-input type="password" v-model="form.password"></el-input>
                            </el-form-item>
                            <el-form-item label="确认新密码：" prop="conformPassword">
                                <el-input type="password" v-model="form.conformPassword"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts" name="ucenter">
import { reactive, ref } from 'vue';
import 'vue-cropper/dist/index.css';
import avatar from '@/assets/img/img.jpg';
import { public_key, update_oneself_user_password } from '@/api';
import type { FormInstance } from 'element-plus'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import JSEncrypt from 'jsencrypt';

const avatarImg = ref(avatar);
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (form.password !== '') {
      if (!ruleFormRef.value) return
      if( /^(?![0-9]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,}$/.test(value)) {
        ruleFormRef.value.validateField('conformPassword')
      } else {
        callback(new Error('密码包含字母和数字且长度不小于6'))
      }
      
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入新密码'))
  } else if (value !== form.password) {
    callback(new Error("两次密码输入不一致"))
  } else {
    callback()
  }
}
const rules = reactive({
    old_password: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        {  validator: validatePass, trigger: 'blur' },
    ],
    conformPassword: [
        { required: true, message: '请二次确认密码', trigger: 'blur' },
        {  validator: validatePass2, trigger: 'blur' },
    ]
})

const ruleFormRef = ref<FormInstance>()
const name = localStorage.getItem('vuems_name');


const userInfo = JSON.parse(localStorage.getItem('userInfo'))

const form = reactive({
    old_password: '',
    password: '',
    conformPassword: '',
    private_key_id: '',
});
const router = useRouter();
const onSubmit = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            public_key().then(res => {
                form.private_key_id = res.data.private_key_id
                update_oneself_user_password({
                    old_password: encryptWithPublicKey(form.old_password, res.data.public),
                    password: encryptWithPublicKey(form.password, res.data.public),
                    private_key_id: form.private_key_id
                }).then(reslute => {
                    if(reslute.code == '1000') {
                        localStorage.clear();
                        ElMessage.success('密码修改成功');
                        router.push(`/login`);
                    }
                })
            })
        } else {
            console.log('error submit!')
        }
    })

};

const activeName = ref('label1');

const encryptWithPublicKey = (data, publicKey) => {
      const encrypt = new JSEncrypt();
      encrypt.setPublicKey(publicKey);
      return encrypt.encrypt(data);
}
</script>

<style scoped>
.user-container {
    display: flex;
}

.user-profile {
    position: relative;
}

.user-profile-bg {
    width: 100%;
    height: 200px;
    background-image: url('../../assets/img/ucenter-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.user-profile {
    width: 500px;
    margin-right: 20px;
    flex: 0 0 auto;
    align-self: flex-start;
}

.user-avatar-wrap {
    position: absolute;
    top: 135px;
    width: 100%;
    text-align: center;
}

.user-avatar {
    border: 5px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16);
}

.user-info {
    text-align: center;
    padding: 80px 0 30px;
}

.info-name {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 500;
    color: #373a3c;
}

.info-desc {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.info-desc,
.info-desc a {
    font-size: 18px;
    color: #55595c;
}

.info-icon {
    margin-top: 10px;
}

.info-icon i {
    font-size: 30px;
    margin: 0 10px;
    color: #343434;
}

.user-content {
    flex: 1;
}

.user-tabpane {
    padding: 10px 20px;
}

.crop-wrap {
    width: 600px;
    height: 350px;
    margin-bottom: 20px;
}

.crop-demo-btn {
    position: relative;
}

.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.w500 {
    width: 500px;
}

.user-footer {
    display: flex;
    border-top: 1px solid rgba(83, 70, 134, 0.1);
}

.user-footer-item {
    padding: 20px 0;
    width: 33.3333333333%;
    text-align: center;
}

.user-footer > div + div {
    border-left: 1px solid rgba(83, 70, 134, 0.1);
}
</style>

<style>
.el-tabs.el-tabs--left {
    height: 100%;
}
</style>
